<script setup lang="ts">
//使用axios，使用gitlab个人令牌，获取全部的mergeRequest
import {onMounted, ref} from "vue";
import {openUrl,timeConvert,sUrl} from '../lib/lib.ts'
import {
 ClockCircleOutlined,GitlabOutlined,CheckOutlined,ExclamationCircleOutlined,ExportOutlined,AlertOutlined,CloseCircleOutlined,LockOutlined
} from '@ant-design/icons-vue';
import { Empty } from 'ant-design-vue';
import {getMergeRequests} from "../lib/api.ts";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const list=ref([] as any)
const state=ref('all')
const refresh=()=>{

  getMergeRequests({state:state.value})
      .then((data: any) => {
        list.value=data
      })
      .catch((error: any) => {
        console.error('Error fetching merge requests:', error);
      });
}


const convertStateColor = (state: any) => {
  //转换state为rgb颜色，
  switch (state){
    case 'merged':
      return '#1890ff';
    default:
      return '#52c41a';
  }
}

const goRep=(url: string)=>{
  window.open(localStorage.getItem('baseUrl')+url.split('!')[0])
}
onMounted
(async ()=>{
  refresh()
})

</script>

<template>
  <div style="height:298px;overflow-y: auto">
    <div style="display: flex">
      <div style=""> <a-select @change="refresh" v-model:value="state" >
        <a-select-option value="all">
          全部
        </a-select-option >
        <a-select-option value="opened">
          打开
        </a-select-option>
        <a-select-option value="closed">
          已关闭
        </a-select-option >
        <a-select-option value="locked">
          锁定
        </a-select-option>
        <a-select-option value="merged">
          已合并
        </a-select-option>
      </a-select></div>
      <div  style="margin-bottom: 10px;display: flex;align-content: flex-end;align-items: flex-end;justify-items: flex-end;justify-content: flex-end;margin-right: 10px;flex:1">
        <a-button @click="openUrl(sUrl('dashboard/merge_requests?scope=all&state=opened&reviewer_username=cyx'))" type="primary"><ExportOutlined /> 待处理</a-button>
      </div>
    </div>

    <a-empty :image="simpleImage" v-if="list.length==0">

    </a-empty>
    <ul class="list">
      <li @click="openUrl(li.web_url)" v-for="li in list">
        <div style="display: flex;">
          <div :style="{background:convertStateColor(li.state)}" class="state-tag">
            <CheckOutlined v-if="li.state==='merged'" />
            <AlertOutlined  v-else-if="li.state==='opened'"/>
            <CloseCircleOutlined v-else-if="li.state==='closed'"/>
            <LockOutlined v-else-if="li.state==='locked'"/>
            <ExclamationCircleOutlined v-else />
          </div>
          <div>
            <div> <span style="font-weight: bold">{{li.title}} </span></div>
            <div class="xt-text-2">
              <span @click.stop="goRep(li.references.full)" class="xt-text" style="padding-right: 10px"><GitlabOutlined /> {{li.references.full.split('!')[0]}}</span>  <a-avatar style="margin-right: 5px" :size="16" :src="li.author.avatar_url"></a-avatar>{{li.author?.username}} <ClockCircleOutlined style="margin-right: 5px;margin-left: 10px" />{{timeConvert(li.created_at)}}
            </div>
          </div>
        </div>
      </li>
    </ul>

  </div>

</template>

<style scoped lang="scss">
.list{
  list-style: none;
  padding-left: 0;
}
.list li{
  margin-bottom:10px;
}
.list li:hover{
  opacity: 0.8;
  cursor: pointer;
}
.state-tag{
  padding: 2px 5px;
  background-color:#1890ff;
  text-align: center;
  color: white;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  align-content: center;
  display: flex;
}
//纤细的滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(98, 98, 98, 0.3);
}
::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: rgba(30, 30, 30, 0.11);
}
</style>